<template>
  <div class="label case childPage">
    <div class="head">
      <Header :next="'label'"/>
    </div>
    <div class="block_1 block">
      <div class="block_content">
        <div class="bc_text">
          <transition-group name="list">
            <template v-for="item in 1" v-if="block_1_text">
              <template>
                <h1 :key="item">标签多场景应用方案</h1>
                <h4 key="2" class="mt40">
                  标签多场景应用，我们提供全面的解决方案
                </h4>
              </template>
            </template>
          </transition-group>
        </div>
        <div class="bc_img">
          <el-image :src="require('@/assets/page_three/1.png')"></el-image>
          <template v-for="item in imgs_1">
            <transition :name="item.name">
              <el-image :src="item.img" class="page_1" :class="item.class" :key="item.class" v-if="block_1_text">
              </el-image>
            </transition>
          </template>
        </div>
      </div>
    </div>
    <div class="block_new">
      <h1 class="mb35">标签应用解决方案</h1>
      <h3 class="mb130">从防伪到溯源，一站式解决方案提供商</h3>
      <div class="flexLr bt">
        <div class="left">
          <h2>防伪<span>解决方案</span></h2>
          <h4>针对市面假货提供专业的防伪技术支持</h4>
          <div class="flexs">
            <div class="item" v-for="item in iconList" :class="item.type?'item_1':''">
              <div class="img_div">
                <el-image :src="require('@/assets/page_three/'+item.src+'.png')" />
              </div>
              <p>{{item.name}}</p>
            </div>
          </div>
        </div>
        <div class="flexs ml80">
          <div class="item_2" v-for="(item,index) in textList">
            <div class="img_div">
              <el-image :src="require('@/assets/page_three/img'+ (index+1) +'.png')" />
            </div>
            <h4>{{item.name}}</h4>
            <p>{{item.dec}}</p>
          </div>
        </div>
      </div>
      <div class="flexLr bt">
        <div class="flexs">
          <div class="b_text">
            <p>留底标</p>
            <el-image :src="require('@/assets/page_three/ldb.png')" />
          </div>
          <div class="b_text">
            <p>易碎纸</p>
            <el-image :src="require('@/assets/page_three/ysz.png')" />
          </div>
        </div>
        <div class="left">
          <h2>防开<span>解决方案</span></h2>
          <h4>避免产品被恶意开启，保护商家和消费者的权益</h4>
          <div class="flexs">
            <div class="item" v-for="item in iconList1" :class="item.type?'item_1':''">
              <div class="img_div">
                <el-image :src="require('@/assets/page_three/'+item.src+'.png')" />
              </div>
              <p>{{item.name}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="flexLc bt mb0">
        <div class="left">
          <h2>溯源<span>解决方案</span></h2>
          <h4>实现产品原材料，制造，运输等信息的动态查询</h4>
          <div class="flexs">
            <div class="item" v-for="item in iconList2" :class="item.type?'item_1':''">
              <div class="img_div">
                <el-image :src="require('@/assets/page_three/'+item.src+'.png')" />
              </div>
              <p>{{item.name}}</p>
            </div>
          </div>
        </div>
        <div class="img_block">
          <el-image :src="require('@/assets/page_three/7.png')" class="img_7" />
          <el-image :src="require('@/assets/page_three/8.png')" class="img_8" />
          <el-image :src="require('@/assets/page_three/9.png')" class="img_9" />
        </div>
      </div>
    </div>
    <div class="foot">
      <Footer />
    </div>
  </div>
</template>
<script>
  import Header from "@/components/header";
  import Footer from "@/components/footer";
  import $ from "jquery";
  import router from "@/router";
  export default {
    name: "web_content",
    components: {
      Header,
      Footer,
    },
    data() {
      return {
        block_1_text: false,
        imgs_1: [{
            img: require("@/assets/page_three/2.png"),
            class: "page_1_10",
            name: "right",
          },
          {
            img: require("@/assets/page_three/3.png"),
            class: "page_1_11",
            name: "bottom",
          },
        ],
        iconList: [{
            src: 'save',
            name: "防伪",
          },
          {
            src: 'warn',
            name: "防开",
            type: 1,
          },
          {
            src: 'vr',
            name: "营销",
          },
          {
            src: 'info',
            name: "信息",
          },
          {
            src: 'music',
            name: "溯源",
            type: 1,
          },
        ],
        textList: [{
            name: "材料防伪",
            dec: "最为常用的加密方式，通常使用特种材料、变色油墨，铝粉遮盖等方式"
          },
          {
            name: "工艺防伪",
            dec: "使用特殊工艺制作，如烫金、凹凸、UV、金属线等工艺，增加造假难度"
          },
          {
            name: "数据防伪",
            dec: "指通过加密算法，把图形与数据做结合，利用服务器做真伪验证"
          },
          {
            name: "动作防伪",
            dec: "揭开标、刮开标签 通过不同的形式，刮开或揭开标签来显示被隐藏的信息"
          },
        ],
        iconList1: [{
            src: 'save',
            name: "防伪",
          },
          {
            src: 'warn1',
            name: "防开",
          },
          {
            src: 'vr1',
            name: "营销",
            type: 1,
          },
          {
            src: 'info',
            name: "信息",
          },
          {
            src: 'music',
            name: "溯源",
            type: 1,
          },
        ],
        iconList2: [{
            src: 'save',
            name: "防伪",
          },
          {
            src: 'warn',
            name: "防开",
            type: 1,
          },
          {
            src: 'vr',
            name: "营销",
          },
          {
            src: 'info1',
            name: "信息",
            type: 1,
          },
          {
            src: 'music1',
            name: "溯源",
          },
        ],
      };
    },
    props: {},
    mounted() {
      this.block_1_text = true;
    },
    methods: {

    },
  };
</script>
<style lang="scss" scoped>
  @import "./css.scss";

  .childPage {
    .block_1 {
      .page_1_10 {
        left: 200px;
        top: 30px;
      }

      .page_1_11 {
        left: 430px;
        top: 280px;
      }
    }
  }
</style>